<template>
  <div class="page-tabbar">
    <div class="page-wrap"  >
      <mt-tab-container class="mint-tab-container page-tabbar-container" >
        <router-view />
      </mt-tab-container>
    </div>
    <mt-tabbar v-model="message" fixed  >
      <mt-tab-item :id="tab.id"  v-for="tab in tabArray" :key="tab.id">
        <span :class="tab.iconCss" class="tabIcon"> </span>
          {{tab.name}}
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabArray:[
          {id:"/index/homePage",name:"首页",iconCss:"icon-warehouse-delivery"},
          {id:"/index/category",name:"分类",iconCss:"icon-category"},
          {id:"/index/shoppingCart",name:"购物车",iconCss:"icon-cart"},
          {id:"/index/userCenter",name:"个人中心",iconCss:"icon-account"}
        ],
        message: this.selected!=null?this.selected:this.$route.path,
      }
    },
    props: {
      selected: String
    },
    mounted:function(){
      console.log(this.$route.path+"xxxx");
    },
    watch: {
      message: function (val, oldVal) {
        // 这里就可以通过 val 的值变更来确定去向
        // switch (val) {
        //   case 'HomePage':
        //     this.$router.push('/index/homePage');
        //     break;
        //   case 'Category':
        //     this.$router.push('/index/category');
        //     break;
        //   case 'ShoppingCart':
        //     this.$router.push('/index/shoppingCart');
        //     break;
        //   case 'UserCenter':
        //     this.$router.push('/index/userCenter');
        //     break;
        // }

        this.$router.push(val);

      }
    },
    methods:{

    }
  }
</script>

<style scoped>
  .tabIcon{
    display:block;padding-bottom:6px;
  }

  .mint-tabbar > .mint-tab-item.is-selected {
    color: green;
  }

  .page-tabbar {
    overflow: hidden;

  }

  .page-wrap {


  }

</style>
